<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Atomics 解决内存争抢问题</title>
</head>

<body>
    <div class="main">
        为解决在所有工作者线程读/写操作交织的过程中就会发生资源争用问题，可以使用 Atomics 对象让一个工作者线程获得 SharedArrayBuffer 实例的锁，
        在执行完全部读/写/读操作后，再允许另一个工作者线程执行操作。把 Atomics.add()放到这个例子中
        就可以得到正确的最终

        <ul>
            <li>当所有 Worker 完成工作并返回消息时，计数器 responseCount 增加。只有在所有 Worker 完成后，才会打印 view[0] 的值。</li>
        </ul>


        <h3>
            注意事项
        </h3>
        <ol>
            <li>
                原子操作： 使用 Atomics.add 是确保多线程环境下对共享数据的安全操作。这是一个必要的步骤，以避免数据竞争和不一致性。
            </li>
            <li>
                性能考量： 虽然 SharedArrayBuffer 和 Atomics 使得多线程操作成为可能，但在高负载场景下，频繁的加法操作可能会导致性能瓶颈。可以考虑优化算法或减少工作负载。
            </li>
            <li>
                确保 Worker 可用： 确保 worker.js 文件存在并可以被正确访问。如果 Worker 的路径不正确，浏览器将无法加载该文件。
            </li>
        </ol>

        <h3>
            改进建议

        </h3>

        <ol>
            <li>
                消息传递优化： 你可以在 Worker 中执行完成后直接发送结果而不是使用 null，这有助于确认所有操作已经完成并返回有用的数据。
            </li>
            <li>
                进度反馈： 如果每个 Worker 的任务较重，考虑在 worker.js 中定期发送进度更新，以便主线程可以显示处理进度。
            </li>
            <li>
                错误处理： 在 Worker 的消息处理和主线程中添加错误处理，以便能够捕获任何潜在的错误并适当响应
            </li>
        </ol>


        <h3>参数</h3>
<ol>
    <li>
        typedArray：要操作的共享内存的视图，通常是 SharedArrayBuffer 的一种类型，例如 Int32Array、Uint32Array 等。

    </li>
    <li>
        index：要加的元素的索引。这个索引是相对于 typedArray 的。

    </li>
    <li>
        value：要加到 typedArray 中指定位置的值。
    </li>
</ol>


<h3>
    作用
</h3>
<ol>
    <li>
        Atomics.add 会将 value 加到 typedArray 中指定的 index 位置的当前值上。
    </li>
    <li>
        此操作是原子性的，这意味着它在多线程环境下不会被其他操作中断，从而避免数据竞争和不一致性。

    </li>
    <li>
        在操作完成后，该方法返回 加法操作之前的值。
    </li>
</ol>

<h3>
    使用场景
</h3>
<p>
    Atomics.add 通常用于需要多个线程共享和修改同一数据的场景，尤其是在 Web Workers 和多线程计算中。这种方法确保了数据的一致性，避免了传统的 JavaScript 代码在并发修改时可能出现的错误。
</p>

<h3>
    注意事项
</h3>
<ol>
    <li>
        由于 Atomics 方法只能与 SharedArrayBuffer 和其视图一起使用，确保正确使用。
    </li>
    <li>
        Atomics 方法是同步的，调用它会阻塞调用线程，直到操作完成，这可能影响性能，尤其是在需要频繁访问的高负载场景中。
    </li>
    <li>
        使用 Atomics 方法时，务必理解如何正确管理共享内存，避免死锁或其他并发问题。
    </li>
</ol>




    </div>
    <script src="./main.js"></script>
</body>

</html>